<!--表单-->
<template>
	<el-form :ref="myRef" :size="mySize" v-bind="$attrs" :model="model" :inline-message="inlineMessage" :inline="inline" :label-width="labelWidth">
		<div v-if="rowFlag">
			<zh-row :gutter="gutter" :justify="justify" :align="align" v-bind="golbalProps">
				<slot />
			</zh-row>
		</div>
		<div v-if="!rowFlag">
			<slot />
		</div>
	</el-form>
</template>
<script lang="ts" setup>
import { uuid } from '@/utils/util';
import { theme } from '@/store';
// 定义属性
const props = defineProps({
	formRef: {
		type: String,
		default: null,
	},
	model: Object,
	rowFlag: {
		type: Boolean,
		default: true,
	},
	//默认全部可编辑设置
	disabled: {
		type: Boolean,
		default: false,
	},
	//通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
	inline: {
		type: Boolean,
		default: true,
	},
	inlineMessage: {
		type: Boolean,
		default: true,
	},
	//Width of label, e.g. '50px'. 作为 Form 直接子元素的 form-item 会继承该值。 auto is supported.
	labelWidth: {
		type: [String, Number],
		default: '100px',
	},
	gutter: {
		type: Number,
		default: 10,
	},
	// flex 布局下的水平排列方式：start end center space-around space-between
	justify: {
		type: String,
		default: 'start',
	},
	//行内对齐  布局下的垂直对齐方式：top middle bottom
	align: {
		type: String,
		default: 'top',
	},
	// 栅格占据的列数
	span: Number,
	// 栅格左侧的间隔格数
	offset: {
		type: Number,
		default: 0,
	},
	// 栅格向右移动格数
	push: {
		type: Number,
		default: 0,
	},
	// 栅格向左移动格数
	pull: {
		type: Number,
		default: 0,
	},
	//自定义元素标签:html标签
	tag: {
		type: String,
		default: 'div',
	},
	// <768px 响应式栅格数或者栅格属性对象
	xs: [Number, Object],
	// ≥768px 响应式栅格数或者栅格属性对象
	sm: [Number, Object],
	// ≥992px 响应式栅格数或者栅格属性对象
	md: [Number, Object],
	// ≥1200px 响应式栅格数或者栅格属性对象
	lg: [Number, Object],
	// ≥1920px 响应式栅格数或者栅格属性对象
	xl: [Number, Object],
});
const attrs = useAttrs();
const that: any = getCurrentInstance();
const state = reactive({
	myRef: props.formRef ? props.formRef : uuid(),
	mySize: attrs.size,
});
let golbalProps = {
	size: state.mySize,
	span: props.span,
	ofset: props.offset,
	pull: props.pull,
	push: props.push,
	xs: props.xs,
	sm: props.sm,
	md: props.md,
	lg: props.lg,
	xl: props.xl,
	rowFlag: props.rowFlag,
	disabled: props.disabled,
};
//校验表单
const checkForm = (fieldsToValidate: string[]) => {
	if (fieldsToValidate && fieldsToValidate.length === 0) {
		return true;
	}
	let myForm = that.refs[state.myRef];
	if (fieldsToValidate) {
		return new Promise((resolve) => {
			myForm.validateField(fieldsToValidate, (valid) => {
				resolve(valid);
			});
		});
	} else {
		return new Promise((resolve) => {
			myForm.validate((valid) => {
				resolve(valid);
			});
		});
	}
};
// 定义方法
function validate(callback: any) {
	that.refs[state.myRef].validate((valid: any) => {
		if (valid) {
			callback && callback(valid);
		} else {
			callback && callback(valid);
		}
	});
}
function validateField(props: any, callback: any) {
	that.refs[state.myRef].validateField(props, (errorMessage: any) => {
		callback && callback(errorMessage);
	});
}
function resetFields() {
	that.refs[state.myRef].resetFields();
}
function clearValidate(props: any) {
	that.refs[state.myRef].clearValidate(props);
}
// 初始化
if (!state.mySize) {
	state.mySize = theme.globalComponentSize;
}
// 输出
const { mySize, myRef } = toRefs(state);
defineExpose({
	validate,
	validateField,
	resetFields,
	clearValidate,
	checkForm,
	...props,
});
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-form',
	inheritallAttrs: false,
};
</script>

<style></style>
